
<!DOCTYPE html>
<html lang="">


<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <meta name="theme-color" content="#202020">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>
  
  
    <meta name="keywords" content="基础,HTML,">
  

  
    <meta name="description" content="第十四章 HTML基础学习目录">
  
  
  
  <link rel="icon" type="image/x-icon" href="/images/footer-logo.png">
  
  <title>第十四章 HTML基础学习目录 [ 51AIOps 专注于运维自动化  微信： kaipython ]</title>
  
    <!-- stylesheets list from config.yml -->
    
      <link rel="stylesheet" href="//cdn.bootcss.com/pure/1.0.0/pure-min.css">
    
      <link rel="stylesheet" href="/css/xoxo.css">
    
  
</head>


<body>
  <div class="nav-container">
    <nav class="home-menu pure-menu pure-menu-horizontal">
  <a class="pure-menu-heading" href="/">
    
    <span class="title" style="text-transform:none">51AIOps 专注于运维自动化  微信： kaipython</span>
  </a>

  <ul class="pure-menu-list clearfix">
      
          
            
              <li class="pure-menu-item"><a href="/" class="pure-menu-link">首页</a></li>
            
          
      
  </ul>
   
</nav>

  </div>

  <div class="container" id="content-outer">
    <div class="inner" id="content-inner" style='margin-left:-68px!important'>
      <div class="post-container">
  <article class="post" id="post">
    <header class="post-header text-center">
      <h1 class="title">
        第十四章 HTML基础学习目录
      </h1>
      <span>
        
        <time class="time" datetime="2017-05-07T11:55:09.000Z">
        2017-05-07
      </time>
        
      </span>
      <span class="slash">/</span>
      <span class="post-meta">
      <span class="post-tags">
        <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/HTML/">HTML</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/基础/">基础</a></li></ul>
      </span>
    </span>
      <span class="slash">/</span>
      <span class="read">
      <span id="busuanzi_value_page_pv"></span> 点击
    </span>
      <span class="slash">/</span>
    </header>

    <div class="post-content">
      <h3 id="html相关概念"><a href="#html相关概念" class="headerlink" title="html相关概念"></a><div id="title">html相关概念</div></h3><p><strong>1.html是什么</strong></p>
<blockquote>
<p>1.超文本标记语言（Hypertext Markup Language，HTML）通过标记符号来标记要显示的网页中的内容。</p>
</blockquote>
<blockquote>
<p>2.<font color="red">其实就是一套规则，浏览器认识的规则。   </font></p>
</blockquote>
<blockquote>
<p>3.<font color="red">浏览器按顺序渲染网页文件，然后根据标记符解释和显示内容。</font></p>
</blockquote>
<blockquote>
<p>4.对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）。</p>
</blockquote>
<p><strong>2.w3c(了解)</strong></p>
<ul>
<li><p>w3c是什么？</p>
<blockquote>
<p>万维网联盟（World Wide Web Consortium，简称W3C）创建于1994年，是Web技术领域具权威和影响力的国际标准化组织</p>
</blockquote>
</li>
<li><p>w3c的主要工作？</p>
<blockquote>
<p>W3C主要工作，是制作Web规范。到目前为止，W3C已发布了200多项影响深远的Web技术标准。比如：XHTML、HTML5、XML、CSS、DOM、XSTL等</p>
</blockquote>
</li>
</ul>
<hr>
<h3 id="html的发展历史"><a href="#html的发展历史" class="headerlink" title="html的发展历史"></a><div id="title">html的发展历史</div></h3><p><img src="https://s2.ax1x.com/old/FAlyd.png" alt="FAlyd.png"></p>
<hr>
<h3 id="主流浏览器及其份额"><a href="#主流浏览器及其份额" class="headerlink" title="主流浏览器及其份额"></a><div id="title">主流浏览器及其份额</div></h3><p><img src="https://s2.ax1x.com/old/FA1OA.png" alt="FA1OA.png"></p>
<hr>
<h3 id="html文件结构以及标签格式"><a href="#html文件结构以及标签格式" class="headerlink" title="html文件结构以及标签格式"></a><div id="title">html文件结构以及标签格式</div></h3><p><strong>1.html的文件格式</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt; !<span class="attr">DOCTYPE</span> <span class="attr">html</span> &gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span>		       </span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">	  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">“UTF-8”/</span>&gt;</span></span><br><span class="line">	  <span class="tag">&lt;<span class="name">title</span>&gt;</span>网页标题<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">	      文件体</span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong><font color="red">上述代码说明：</font></strong></p>
<blockquote>
<p>1.<code>&lt;html&gt;&lt;/html&gt;</code>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head><meta name="generator" content="Hexo 3.8.0">和主体</head><body></body></p>
</blockquote>
<blockquote>
<p>2.<code>&lt;head&gt;&lt;/head&gt;</code>元素出现在文档的开头部分。<code>&lt;head&gt;</code>与<code>&lt;/head&gt;</code>之间的内容不会在浏览器的文档窗口显示，但是其中的元素有特殊重要的意义</p>
</blockquote>
<blockquote>
<p>3.<code>&lt;title&gt;&lt;/title&gt;</code>定义网页标题，在浏览器标题栏显示</p>
</blockquote>
<blockquote>
<p>4.<code>&lt;body&gt;&lt;/body&gt;</code>之间的文本是可见的网页主体内容</p>
</blockquote>
<p><strong>2.html标签格式</strong></p>
<ul>
<li>HTML标签是由尖括号包围的关键词，比如 <code>&lt;html&gt;</code></li>
<li>标签对中的第一个标签是开始标签，第二个标签是结束标签</li>
<li>HTML标签通常是成对出现的（双边标记），比如 <code>&lt;div&gt;</code> 和 <code>&lt;/div&gt;</code> </li>
<li>但也有单独呈现的标签（单边标记），如：<code>&lt;br /&gt;</code>、<code>&lt;hr /&gt;</code>和<code>&lt;img src=“images/1.jpg” /&gt;</code>等</li>
<li>标签可以有若干个属性，也可以不带属性。如<code>&lt;head&gt;</code>元素就不带任何属性</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">标答的语法：</span><br><span class="line"><span class="tag">&lt;<span class="name">标签名</span> 属性<span class="attr">1</span>=<span class="string">“属性值1”</span> 属性<span class="attr">2</span>=<span class="string">“属性值2”……</span>&gt;</span>内容部分<span class="tag">&lt;/<span class="name">标签名</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">标签名</span> 属性<span class="attr">1</span>=<span class="string">“属性值1”</span> 属性<span class="attr">2</span>=<span class="string">“属性值2”……</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<hr>
<h3 id="html常用标签之Meta"><a href="#html常用标签之Meta" class="headerlink" title="html常用标签之Meta"></a><div id="title">html常用标签之Meta</div></h3><p><strong>Meta介绍</strong></p>
<ul>
<li><code>&lt;meta&gt;</code>元素可提供有关页面的元信息（meta-information），针对搜索引擎和更新频度的描述和关键词</li>
<li><code>&lt;meta&gt;</code>标签位于文档的头部，不包含任何内容</li>
<li><code>&lt;meta&gt;</code>提供的信息是用户不可见的</li>
</ul>
<p><strong>Meta常见的属性</strong></p>
<ul>
<li>http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值</li>
</ul>
<p><strong>关于meta常见的用法</strong></p>
<ul>
<li><p>content-type</p>
<blockquote>
<p>功能：设定当前页面使用的字符集和语言<br>用法：<code>&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;</code></p>
</blockquote>
</li>
<li><p>refresh(刷新)（不推荐使用）</p>
<blockquote>
<p>功能：自动刷新，并指向新的页面<br>用法：<code>&lt;meta http-equiv=&quot;refresh&quot; content=“2;url=http://baidu.com” /&gt;</code></p>
</blockquote>
</li>
<li><p>author（作者）</p>
<blockquote>
<p>说明：标注网页的作者<br>用法：<code>&lt;meta name=“author” content=“张三”&gt;</code></p>
</blockquote>
</li>
<li><p>Copyright(版权信息)</p>
<blockquote>
<p>功能：说明网站版权信息<br>用法：<code>&lt;meta name=“copyright&quot; content=&quot;信息参数&quot;&gt;</code> </p>
</blockquote>
</li>
</ul>
<p><strong>简单实例</strong></p>
<p><img src="https://s2.ax1x.com/old/FAJTP.png" alt="FAJTP.png"></p>
<hr>
<h3 id="html常用标签之字体以及排版标签"><a href="#html常用标签之字体以及排版标签" class="headerlink" title="html常用标签之字体以及排版标签"></a><div id="title">html常用标签之字体以及排版标签</div></h3><p><strong>1. 字体修饰标签</strong></p>
<table>
<thead>
<tr>
<th align="center">标签</th>
<th align="center">作用</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><code>&lt;b&gt;&lt;/b&gt;</code></td>
<td align="center">加粗效果</td>
</tr>
<tr>
<td align="center"><code>&lt;i&gt;&lt;/i&gt;</code></td>
<td align="center">斜体效果</td>
</tr>
<tr>
<td align="center"><code>&lt;u&gt;&lt;/u&gt;</code></td>
<td align="center">下划线效果</td>
</tr>
<tr>
<td align="center"><code>&lt;s&gt;&lt;/s&gt;</code></td>
<td align="center">删除效果</td>
</tr>
</tbody></table>
<p><strong>2. 排版元素（常用）</strong></p>
<table>
<thead>
<tr>
<th align="center">标签</th>
<th align="center">作用</th>
</tr>
</thead>
<tbody><tr>
<td align="center"><code>&lt;p&gt;&lt;/p&gt;</code></td>
<td align="center">用来创建一个段落，该元素自动在其前后创建一些空白</td>
</tr>
<tr>
<td align="center"><code>&lt;br/&gt;</code></td>
<td align="center">换行</td>
</tr>
<tr>
<td align="center"><code>&lt;hr/&gt;</code></td>
<td align="center">华丽的分割线</td>
</tr>
<tr>
<td align="center"><code>&lt;h1&gt;&lt;/h1&gt;...&lt;h6&gt;&lt;/h6&gt;</code></td>
<td align="center">6种标题效果标签。分别为h1~h6。<h1>字体最大，<h6>字体最小</h6></h1></td>
</tr>
</tbody></table>
<p><strong>3. 字符实体（了解即可）</strong></p>
<p><img src="https://s2.ax1x.com/old/FAtFf.png" alt="FAtFf.png"></p>
<p><strong>4.marquee标签（跑马灯的实现）</strong></p>
<hr>
<h3 id="html常用标签之列表"><a href="#html常用标签之列表" class="headerlink" title="html常用标签之列表"></a><div id="title">html常用标签之列表</div></h3><p><strong>1.无序列表</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>常用属性解释</strong></p>
<blockquote>
<p>type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)</p>
</blockquote>
<p><strong>2.有序列表</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>常用属性解释</strong></p>
<blockquote>
<p>属性：type编号类型，默认为整数。可选（1、A、a、Ⅰ、i）<br>属性：start起始编号，默认为1，即由最小编号开始</p>
</blockquote>
<hr>
<h3 id="html常用标签之a标签"><a href="#html常用标签之a标签" class="headerlink" title="html常用标签之a标签"></a><div id="title">html常用标签之a标签</div></h3><p><strong>1.语法</strong></p>
<blockquote>
<p><code>&lt;a 属性=“属性值”&gt;标签内容&lt;/a&gt;</code></p>
</blockquote>
<p><strong>2.常见的属性</strong></p>
<ul>
<li><p>href – 指定目标网页的地址，该地址可以有如下类型：</p>
<blockquote>
<p>链接远程目标：通过URL地址链接到远程目标。</p>
<p>链接本地页面：可以通过相对路径或者绝对路径链接本地页面。</p>
<blockquote>
<p>相对路径：指相对于当前页面位置的路径<br>./：表示当前页面所在的目录<br>../：表示当前页面所在的上一级目录</p>
</blockquote>
<blockquote>
<p>绝对路径：绝对路径指当前站点中确切的路径，一般以”/”开始 例如：<code>&lt;a href=“/admin/index.py”&gt;后台首页&lt;/a&gt;</code></p>
</blockquote>
</blockquote>
</li>
<li><p>target</p>
<blockquote>
<p>_blank表示在<font color="red">新窗口</font>中打开目标网页<br>_self表示在<font color="red">当前窗口</font>中打开目标网页</p>
</blockquote>
</li>
</ul>
<p><strong>3.常见例子</strong></p>
<p>1).链接到远程地址</p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">“http://www.sina.com.cn”</span>&gt;</span>新浪网<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">“http://www.qq.com”</span>&gt;</span>腾讯网<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p>2).链接到本地文件：</p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml">相对路径：<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">“include/login.html”</span>&gt;</span>登录页面<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="xml">绝对路径：<span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">“/html/123.html”</span>&gt;</span>国内新闻<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p>3).链接到邮箱：</p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">“mailto:976296751@qq.com”</span>&gt;</span>给我发邮件<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p>4).下载文件：</p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">“/download/winRAR.rar”</span>&gt;</span>下载WinRAR<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">“download/office2007.rar”</span>&gt;</span>下载office2007<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<hr>
<h3 id="html常用标签之div和span元素"><a href="#html常用标签之div和span元素" class="headerlink" title="html常用标签之div和span元素"></a><div id="title">html常用标签之div和span元素</div></h3><p><strong>1. <code>&lt;div&gt;&lt;/div&gt;</code></strong></p>
<blockquote>
<p><code>&lt;div&gt;</code>只是一个块级元素，并无实际的意义. 主要通过CSS为其赋予不同的表现</p>
</blockquote>
<p><strong>2. <code>&lt;span&gt;&lt;/span&gt;</code></strong></p>
<blockquote>
<p><code>&lt;span&gt;</code>内联行(行内元素),并无实际的意义. 主要通过CSS为其赋予不同的表现</p>
</blockquote>
<p><strong><font color="red">块级元素与行内元素的区别:</font></strong></p>
<blockquote>
<p>所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行<br>如果单独在网页中插入这两个元素，不会对页面产生任何的影响<br>这两个元素是专门为定义CSS样式而生的</p>
</blockquote>
<h3 id="html常用标签之img标签"><a href="#html常用标签之img标签" class="headerlink" title="html常用标签之img标签"></a><div id="title">html常用标签之img标签</div></h3><p><strong>常见的用法</strong></p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">"URL"</span> <span class="attr">alt</span>=<span class="string">"图片说明"</span>/&gt;</span></span></span><br></pre></td></tr></table></figure>

<p><strong>常见的属性用法说明：</strong></p>
<table>
<thead>
<tr>
<th align="center">属性</th>
<th align="center">值</th>
<th align="center">含义</th>
</tr>
</thead>
<tbody><tr>
<td align="center">src</td>
<td align="center">图像URL</td>
<td align="center">规定图像的URL</td>
</tr>
<tr>
<td align="center">alt</td>
<td align="center">字符串</td>
<td align="center">规定图像的替代文本</td>
</tr>
<tr>
<td align="center">width</td>
<td align="center">px / %</td>
<td align="center">规定图像的宽</td>
</tr>
<tr>
<td align="center">height</td>
<td align="center">px / %</td>
<td align="center">规定图像的高</td>
</tr>
<tr>
<td align="center">border</td>
<td align="center">px</td>
<td align="center">图像的边框粗细</td>
</tr>
</tbody></table>
<hr>
<h3 id="html常用标签之table标签"><a href="#html常用标签之table标签" class="headerlink" title="html常用标签之table标签"></a><div id="title">html常用标签之table标签</div></h3><p><strong>1.html表格的基本结构</strong></p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">table</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>标题<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>标题<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span></span><br><span class="line"><span class="xml">     <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p><strong>解释说明</strong></p>
<blockquote>
<p>1). <code>&lt;table&gt;&lt;/table&gt;</code>表示的表格的开始和结束<br>2). <code>&lt;tr&gt;&lt;/tr&gt;</code>表示的是表格的一行<br>3). <code>&lt;td&gt;&lt;/td&gt;</code>表示的是一个单元数据格<br>4). <code>&lt;th&gt;&lt;/th&gt;</code>表示表格标题单元格，且加粗居中显示</p>
</blockquote>
<p><strong>2.table的常用属性</strong></p>
<table>
<thead>
<tr>
<th align="center">属性</th>
<th align="center">值</th>
<th align="center">含义</th>
</tr>
</thead>
<tbody><tr>
<td align="center">width</td>
<td align="center">px或%</td>
<td align="center">表格的宽度</td>
</tr>
<tr>
<td align="center">height</td>
<td align="center">px或%</td>
<td align="center">表格的高度</td>
</tr>
<tr>
<td align="center">border</td>
<td align="center">px</td>
<td align="center">表格的边框的粗细</td>
</tr>
<tr>
<td align="center">align</td>
<td align="center">Left/center/right</td>
<td align="center">元素的对齐方式</td>
</tr>
</tbody></table>
<p><strong>3.简单的案例实现</strong></p>
<p><img src="https://s2.ax1x.com/old/FEp7t.png" alt="FEp7t.png"></p>
<hr>
<h3 id="html常用标签之form表单元素标签"><a href="#html常用标签之form表单元素标签" class="headerlink" title="html常用标签之form表单元素标签"></a><div id="title">html常用标签之form表单元素标签</div></h3><h4 id="1-form表单的基本概念"><a href="#1-form表单的基本概念" class="headerlink" title="1. form表单的基本概念"></a>1. form表单的基本概念</h4><ul>
<li><p>基本概念</p>
<blockquote>
<p>HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。<br>表单一般用来收集用户的输入信息</p>
</blockquote>
</li>
<li><p>表单的工作原理</p>
<blockquote>
<p>访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交<br>这些信息通过Internet传送到服务器上<br>服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误 </p>
</blockquote>
</li>
<li><p>表单的常见结构</p>
</li>
</ul>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">form</span> <span class="attr">id</span>=<span class="string">"form1"</span>  <span class="attr">method</span>=<span class="string">"post"</span> <span class="attr">action</span>=<span class="string">""</span>&gt;</span></span></span><br><span class="line"><span class="xml">    账号：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">name</span>=<span class="string">"account"</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line"><span class="xml">    密码：<span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> <span class="attr">name</span>=<span class="string">"password"</span> /&gt;</span><span class="tag">&lt;<span class="name">br</span> /&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">name</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"提交"</span> /&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"reset"</span>  <span class="attr">name</span>=<span class="string">"reset"</span>  <span class="attr">value</span>=<span class="string">"重置"</span> /&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<ul>
<li>表单标记属性</li>
</ul>
<table>
<thead>
<tr>
<th align="center">属性</th>
<th align="center">值</th>
<th align="center">含义</th>
</tr>
</thead>
<tbody><tr>
<td align="center">action</td>
<td align="center">url</td>
<td align="center">指定一个表单处理目标URL，表单数据将被提交到该URL地址的处理程序。如果该属性值为空，则提交到文档自身。该属性值可以为绝对地址、相对地址、文档片段，甚至是脚本代码</td>
</tr>
<tr>
<td align="center">method</td>
<td align="center">get或post</td>
<td align="center">将表单数据提交到http服务器的方法，可能值有两个：get和post</td>
</tr>
<tr>
<td align="center">enctype</td>
<td align="center">application/x-www-form-urlencoded</td>
<td align="center">指定表单数据的编码类型，此属性只有在method属性设置为post时才有效。默认值为application/x-www-form-urlencoded对所有字符进行编码。如果表单包含用于文件上传的控件（input type=“file”），那么这个属性值必须设为multipart/form-data ，不对字符进行编码。</td>
</tr>
</tbody></table>
<p><strong>补充：Get和Post提交的区别</strong></p>
<ul>
<li><p>Get方式提交</p>
<blockquote>
<p>如果为get，那么所提交的数据集将被作为一个由表单的所有名/值对组成的查询字符串（query string）添加到表单处理器的URL（action属性）的末尾<br>比如：<a href="http://www.oldboyedu.com/index.py?variable1=content1&amp;variable1=content2" target="_blank" rel="noopener">http://www.oldboyedu.com/index.py?variable1=content1&amp;variable1=content2</a><br>这种方法提交的信息在长度上有一定限制，而且不安全，适合简单的数据查询</p>
</blockquote>
</li>
<li><p>Post方式提交</p>
<blockquote>
<p>如果为post，那么数据集将直接发给表单处理程序，而不是以可见的URL查询字符串的形式。<br>post方法可以提交更长的数据，并且相对安全一些，传送的数据类型更多一些（不限于ASCII字符），因而适用于数据更复杂的表单</p>
</blockquote>
</li>
</ul>
<h4 id="2-常见的input标签"><a href="#2-常见的input标签" class="headerlink" title="2.常见的input标签"></a>2.常见的input标签</h4><table>
<thead>
<tr>
<th align="center">type属性值</th>
<th align="center">空间名称</th>
<th align="center">对应代码</th>
</tr>
</thead>
<tbody><tr>
<td align="center">text</td>
<td align="center">单行文本输入框</td>
<td align="center"><code>&lt;input type=&quot;text&quot;/&gt;</code></td>
</tr>
<tr>
<td align="center">password</td>
<td align="center">密码输入框</td>
<td align="center"><code>&lt;input type=&quot;password&quot;/&gt;</code></td>
</tr>
<tr>
<td align="center">checkbox</td>
<td align="center">复选框</td>
<td align="center"><code>&lt;input type=&quot;checkbox&quot; checked=&#39;checked&#39;/&gt;</code></td>
</tr>
<tr>
<td align="center">radio</td>
<td align="center">单选框</td>
<td align="center"><code>&lt;input type=&quot;radio&quot;/&gt;</code></td>
</tr>
<tr>
<td align="center">submit</td>
<td align="center">提交按钮</td>
<td align="center"><code>&lt;input type=&quot;submit&quot; value=&#39;提交&#39;/&gt;</code></td>
</tr>
<tr>
<td align="center">reset</td>
<td align="center">重置按钮</td>
<td align="center"><code>&lt;input type=&quot;reset&quot; value=&#39;重置&#39;/&gt;</code></td>
</tr>
<tr>
<td align="center">button</td>
<td align="center">普通按钮</td>
<td align="center"><code>&lt;input type=&quot;button&quot; value=“普通按钮”/&gt;</code></td>
</tr>
<tr>
<td align="center">hidden</td>
<td align="center">隐藏按钮</td>
<td align="center"><code>&lt;input type=&quot;hidden&quot; value=“隐藏按钮”/&gt;</code></td>
</tr>
<tr>
<td align="center">file</td>
<td align="center">文本选择框</td>
<td align="center"><code>&lt;input type=&quot;file&quot;/&gt;</code></td>
</tr>
</tbody></table>
<p><strong><font color="red">需要注意的问题：</font></strong></p>
<ul>
<li><p>上传文件控件</p>
<blockquote>
<p>当一个<form>中有“上传文件域”，必须指定MIME类型<form>enctype=“multipart/form-data”&gt;，否则无法上传文件<br>上传文件域，只在method=“post”下才有效</form></form></p>
</blockquote>
</li>
<li><p>隐藏控件</p>
<blockquote>
<p><code>&lt;input type=“hidden” name=“nid” value=“234” /&gt;</code><br>隐藏字段对于用户是不可见的<br>隐藏字段通常会存储一个默认值<br>一般用在，修改某条数据时，用来记录数据的id号</p>
</blockquote>
</li>
<li><p>普通按钮</p>
<blockquote>
<p><code>&lt;input type=“button” name=“button” value=“普通按钮” /&gt;</code><br>定义可点击的按钮，但没有任何行为，一般配合JS使用</p>
</blockquote>
</li>
</ul>
<p><strong>各种按钮显示效果</strong></p>
<p><img src="https://s2.ax1x.com/old/FEih8.png" alt="FEih8.png"></p>
<h4 id="3-select下拉列表"><a href="#3-select下拉列表" class="headerlink" title="3.select下拉列表"></a>3.select下拉列表</h4><p><strong>常见的基本结构</strong></p>
<figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">form</span> <span class="attr">id</span>=<span class="string">"form1"</span> <span class="attr">name</span>=<span class="string">"form1"</span> <span class="attr">method</span>=<span class="string">"post"</span> <span class="attr">action</span>=<span class="string">""</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">select</span> <span class="attr">name</span>=<span class="string">"city"</span> <span class="attr">id</span>=<span class="string">"city"</span>&gt;</span></span></span><br><span class="line"><span class="xml">  	    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"北京"</span>&gt;</span>北京<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span></span><br><span class="line"><span class="xml">	    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"天津"</span> <span class="attr">selected</span>=<span class="string">"selected"</span>&gt;</span>天津<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span></span><br><span class="line"><span class="xml">	    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"河北"</span>&gt;</span>河北<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span></span><br><span class="line"><span class="xml">	    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"山东"</span>&gt;</span>山东<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span></span><br><span class="line"><span class="xml">	    <span class="tag">&lt;<span class="name">option</span> <span class="attr">value</span>=<span class="string">"内蒙"</span>&gt;</span>内蒙<span class="tag">&lt;/<span class="name">option</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">select</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p><strong>属性说明</strong></p>
<blockquote>
<p>multiple : 布尔属性，设置后允许多选，否则只能选择一个<br>disabled : 禁用该下拉列表<br>selected : 首次显示时,为选中状态<br>value : 定义发往服务器的选项值</p>
</blockquote>
<h4 id="4-textarea多行文本框"><a href="#4-textarea多行文本框" class="headerlink" title="4.textarea多行文本框"></a>4.textarea多行文本框</h4><figure class="highlight htmlbars"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">form</span> <span class="attr">id</span>=<span class="string">"form1"</span> <span class="attr">name</span>=<span class="string">"form1"</span> <span class="attr">method</span>=<span class="string">"post"</span> <span class="attr">action</span>=<span class="string">""</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">textarea</span> <span class="attr">cols</span>=<span class="string">“宽度”</span> <span class="attr">rows</span>=<span class="string">“高度”</span> <span class="attr">name</span>=<span class="string">“名称”</span>&gt;</span></span></span><br><span class="line"><span class="xml">    默认内容</span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">form</span>&gt;</span></span></span><br></pre></td></tr></table></figure>

<p><strong>属性说明</strong></p>
<table>
<thead>
<tr>
<th align="center">属性</th>
<th align="center">属性值</th>
<th align="center">说明</th>
</tr>
</thead>
<tbody><tr>
<td align="center">name</td>
<td align="center">name</td>
<td align="center">控件名称</td>
</tr>
<tr>
<td align="center">rows</td>
<td align="center">number</td>
<td align="center">设置多行文本框的显示行数（高度）</td>
</tr>
<tr>
<td align="center">cols</td>
<td align="center">number</td>
<td align="center">设置多行文本框的显示列数（宽度）</td>
</tr>
<tr>
<td align="center">disabled</td>
<td align="center">disabled</td>
<td align="center">布尔属性，设置当前文本框为禁用状态</td>
</tr>
</tbody></table>
<p><strong>案例：</strong></p>
<p><img src="https://s2.ax1x.com/old/FEens.png" alt="FEens.png"></p>

    </div>

  </article>
  <div class="toc-container">
    
  <div id="toc" class="toc-article">
    <strong class="toc-title">目录</strong>
    <ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#html相关概念"><span class="toc-text">html相关概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html的发展历史"><span class="toc-text">html的发展历史</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#主流浏览器及其份额"><span class="toc-text">主流浏览器及其份额</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html文件结构以及标签格式"><span class="toc-text">html文件结构以及标签格式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html常用标签之Meta"><span class="toc-text">html常用标签之Meta</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html常用标签之字体以及排版标签"><span class="toc-text">html常用标签之字体以及排版标签</span></a></li></ol><li class="toc-item toc-level-1"><a class="toc-link" href="#undefined"><span class="toc-text">字体最大，字体最小</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#undefined"><span class="toc-text">字体最小</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html常用标签之列表"><span class="toc-text">html常用标签之列表</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html常用标签之a标签"><span class="toc-text">html常用标签之a标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html常用标签之div和span元素"><span class="toc-text">html常用标签之div和span元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html常用标签之img标签"><span class="toc-text">html常用标签之img标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html常用标签之table标签"><span class="toc-text">html常用标签之table标签</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html常用标签之form表单元素标签"><span class="toc-text">html常用标签之form表单元素标签</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#1-form表单的基本概念"><span class="toc-text">1. form表单的基本概念</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-常见的input标签"><span class="toc-text">2.常见的input标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#3-select下拉列表"><span class="toc-text">3.select下拉列表</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#4-textarea多行文本框"><span class="toc-text">4.textarea多行文本框</span></a></li></ol></li>
  </div>


  </div>
</div>
<script type="text/javascript" src="//rf.revolvermaps.com/0/0/8.js?i=5sr5du46f27&amp;m=0&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=33" async="async"></script>
<div class="copyright">
    <span>本作品采用</span>
    <a href="https://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0 国际许可协议</a>
    <span>进行许可。 转载时请注明原文链接。</span>
</div>


  
    <div class="post-nav" style="margin-left:-168px;">
      <div class="post-nav-item post-nav-next">
        
          <span>〈 </span>
          <a href="/2017/05/07/Javascript类库作用以及对比/" rel="next" title="第十七章 JQuery的基础学习">
          第十七章 JQuery的基础学习
          </a>
        
      </div>
  
      <div class="post-nav-item post-nav-prev">
          
          <a href="/2017/05/07/javascript基础学习目录/" rel="prev" title="第十六章 Javascript基础">
            第十六章 Javascript基础
          </a>
          <span>〉</span>
        
      </div>
    </div>
  


	
	<div style="width:109%; margin-left:-144px" id="lv-container" data-id="city" data-uid="MTAyMC80OTg5NS8yNjM4Ng==">
	<script type="text/javascript">
   	   (function(d, s) {
       		var j, e = d.getElementsByTagName(s)[0];

       		if (typeof LivereTower === 'function') { return; }

       		j = d.createElement(s);
       		j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       		j.async = true;

       		e.parentNode.insertBefore(j, e);
   	   })(document, 'script');
	</script>
	<noscript> 为正常使用来必力评论功能请激活JavaScript</noscript>
        </div>
	



    </div>

    

  </div>
  <footer class="footer text-center">
    <div id="bottom-inner">
        <a class="bottom-item" href target="_blank">GitHub</a> |
        <a class="bottom-item" href>友情链接</a> |
        <a class="bottom-item" href="https://hexo.io" target="_blank">Powered by hexo</a> |
        <a class="bottom-item" href="https://github.com/fooying/hexo-theme-xoxo-plus" target="_blank">Theme xoxo-plus</a> |
        <a class="bottom-item" href="/atom.xml">订阅</a>
    </div>
</footer>

  

<script>
  (function(window, document, undefined) {

    var timer = null;

    function returnTop() {
      cancelAnimationFrame(timer);
      timer = requestAnimationFrame(function fn() {
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
          timer = requestAnimationFrame(fn);
        } else {
          cancelAnimationFrame(timer);
        }
      });
    }

    var hearts = [];
    window.requestAnimationFrame = (function() {
      return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
          setTimeout(callback, 1000 / 60);
        }
    })();
    init();

    function init() {
      css(".heart{z-index:9999;width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
      attachEvent();
      gameloop();
      addMenuEvent();
    }

    function gameloop() {
      for (var i = 0; i < hearts.length; i++) {
        if (hearts[i].alpha <= 0) {
          document.body.removeChild(hearts[i].el);
          hearts.splice(i, 1);
          continue;
        }
        hearts[i].y--;
        hearts[i].scale += 0.004;
        hearts[i].alpha -= 0.013;
        hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
      }
      requestAnimationFrame(gameloop);
    }

    /**
     * 给logo设置点击事件
     * 
     * - 回到顶部
     * - 出现爱心
     */
    function attachEvent() {
      var old = typeof window.onclick === "function" && window.onclick;
      var logo = document.getElementById("logo");
      if (logo) {
        logo.onclick = function(event) {
          returnTop();
          old && old();
          createHeart(event);
        }
      }
      
    }

    function createHeart(event) {
      var d = document.createElement("div");
      d.className = "heart";
      hearts.push({
        el: d,
        x: event.clientX - 5,
        y: event.clientY - 5,
        scale: 1,
        alpha: 1,
        color: randomColor()
      });
      document.body.appendChild(d);
    }

    function css(css) {
      var style = document.createElement("style");
      style.type = "text/css";
      try {
        style.appendChild(document.createTextNode(css));
      } catch (ex) {
        style.styleSheet.cssText = css;
      }
      document.getElementsByTagName('head')[0].appendChild(style);
    }

    function randomColor() {
      // return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
      return "#F44336";
    }

    function addMenuEvent() {
      var menu = document.getElementById('menu-main-post');
      if (menu) {
        var toc = document.getElementById('toc');
        if (toc) {
          menu.onclick = function() {
            if (toc) {
              if (toc.style.display == 'block') {
                toc.style.display = 'none';
              } else {
                toc.style.display = 'block';
              }
            }
          };
        } else {
          menu.style.display = 'none';
        }
      }
    }

  })(window, document);
</script>

  



  

</body>
</html>
